import { lazy, Suspense } from 'react'
import { BrowserRouter, Route, Redirect } from 'react-router-dom';

import Home from './views/Home'

import AuthRoute from './components/AuthRoute';
// 使用动态组件的方式导入
const CityList = lazy(() => import('./views/CityList'));
const Map = lazy(() => import('./views/Map'));
const HouseDetail = lazy(() => import('./views/HouseDetail'));
const Login = lazy(() => import('./views/Login'));

const Favorate = lazy(() => import('./views/Favorate'));
const Rent = lazy(() => import('./views/Rent'));
const RentAdd = lazy(() => import('./views/Rent/Add'));
const RentSearch = lazy(() => import('./views/Rent/Search'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div className="router-loading"><img src="./assets/images/loading.gif" alt="加载中..." /></div>}>
        <div className="App">

          {/* 配置路由 */}
          <Route path="/home" component={Home} />
          <Route path="/citylist" component={CityList} />
          <Route path="/map" component={Map} />
          <Route path="/detail/:id" component={HouseDetail} />
          <Route path="/login" component={Login} />
          {/* 鉴权路由 */}
          <AuthRoute path="/Favorate" component={Favorate} />
          <AuthRoute path="/Rent" component={Rent} exact />
          <AuthRoute path="/Rent/add" component={RentAdd} />
          <AuthRoute path="/Rent/search" component={RentSearch} />
          {/* 重定向 */}
          <Route exact path="/" render={() => <Redirect to="/home" />} />
        </div>
      </Suspense>
    </BrowserRouter>

  );
}

export default App;
